$screen-border-color: #24919f;
$screen-border-color-lighter: rgba(53, 193, 201, 0.7);
$screen-border: 1.6px solid $screen-border-color;

$screen-font-color: #bbe8ee;
$screen-fill-color: #11596c;
$screen-fill-color-lighter: #168492;

$screen-left-width: 20%;
$screen-left-height: calc(100% - 100px);
$screen-right-width: 20%;
$screen-right-height: calc(100% - 100px);

/** 因为不能使用 transform 属性，bottom 只能提前算好位置  */
$screen-bottom-width: 50%;
$screen-bottom-left: 25%;

$screen-btn-with: 48px;
$screen-btn-height: 26px;



/** 按钮设计，主要是一些控制面板收缩的按钮 */
.screen-btn {
  color: #FFF;
  font-size: 14px;
  //height: 32px;
  //min-width: 48px;
  //border: $screen-border;
  border: 0;
  vertical-align: middle;
  text-align: center;
  margin-left: 12px;
  border-radius: 4px;
  //background-color: $screen-fill-color-lighter;

  background-color: rgb(28, 88, 96);

  &:hover {
    color: #F0F2F5;
    font-size: 20px;
    //border-color: rgb(197, 225, 255);
    //outline-color: rgb(159, 206, 255);
    //background-color: rgba(64, 158, 255, 0.1);
  }

  &.screen-square-btn {
    width: 32px;
    height: 32px;
    text-align: center;
  }
}

/** 面板基础色调 */
.screen-panel {
  //border: $screen-border;
  box-shadow: 0 0 1px rgba(61, 176, 200, 0.5);
  //box-shadow: 0 0 12px rgba(61, 176, 200, 0.5);
  //padding: 10px;

  background-color: rgba(28, 88, 96, 0.7);
  border-radius: 4px;

  &:hover {
    //border-color: $screen-border-color-lighter;
    background-color: rgba(28, 88, 96, 0.8);
    box-shadow: inset 0 0 12px rgba(61, 176, 200, 0.5);
  }
}

/** 面板基础色调 */
.screen-box {
  margin: 3px;
  padding: 7px;
  //background-color: rgba(255, 255, 255, 0.1);
  background-color: rgba(0,0,0, 0.1);
  border-radius: 2px;
}

/**
 * 标题栏
 *-----------------------------
 * 带简单的波浪动画效果
 */
.screen-title {
  padding: 10px;
  display: flex;
  color: $screen-font-color;
  box-shadow: inset 0 0 12px rgba(61, 176, 200, 0.2);
  align-items: flex-end;

  //border-right: 10px;
  //border-style: solid;
  //border-width: 0 2px 0 0;
  ////border-width: 10px;
  //border-color: $screen-border-color;
  //border: 0 0 10px 0 solid $screen-border-color;

  background: linear-gradient(45deg,
          rgba(46, 115, 148, 0.1), rgba(75, 170, 215, 0.4),
          rgba(46, 115, 148, 0.1), rgba(75, 170, 215, 0.4),
          rgba(46, 115, 148, 0.1));
  animation: gradientScroll 10s linear infinite;
  background-size: 200% 100%;

  //background-image: url('img/screen/title.png');
  //background-size: 100% 100%;
  //background-repeat: no-repeat;
  //background-position: center;

  // 靠右展示的面板
  > .align-right {
    margin-left: auto;
  }
}

@keyframes gradientScroll {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/**
 * 首页大屏
 * --------------------------------------------
 * 主要控制各个组件的位置
 */
.screen-tech {
  width: 100%;
  height: 100vh;
  position: relative;
  justify-content: center;
  color: $screen-font-color;
  //background-color: #0b3f4d;

  /** 内容主体 **/
  .screen-contain {
    width: 100%;
    height: 100vh;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;

    background: linear-gradient(135deg,
            rgba(46, 115, 148, 0.2), rgba(75, 170, 215, 0.3),
            rgba(46, 115, 148, 0.2), rgba(75, 170, 215, 0.3),
            rgba(46, 115, 148, 0.2), rgba(75, 170, 215, 0.3));
    animation: gradientScroll 10s linear infinite;
    background-size: 200% 100%;


    /**遮罩层，增强显示*/
    &::before {
      z-index: 1;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-shadow: 0 0 560px rgba(28, 88, 96, 0.5) inset;
      //background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明遮罩，0.5是透明度 */
      pointer-events: none; /* 可选：允许点击穿透到下方元素 */
    }
  }

  /** 顶部标题栏 **/
  .screen-top {
    width: 100%;
    position: fixed;
    top: 0;
    height: 72px;
    z-index: 300;
    overflow: hidden;

    background-image: url('img/screen/header.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    //background-color: #112145;
    border-bottom: 1px solid #3daecf;
    box-shadow: 0 0 12px rgba(61, 176, 200, 0.5);

    .top-left {
      width: 30%;
      height: 64px;
      padding: 10px;
      box-sizing: border-box;
    }

    .top-right {
      width: 30%;
      height: 64px;
      text-align: right;
      padding: 10px;
      box-sizing: border-box;
    }

    .top-center {
      height: 72px;
      text-align: center;
      padding-top: 18px;
      color: #FFF;
      box-sizing: border-box;
    }
  }

  /** 左侧面板 **/
  .screen-left {
    top: 96px;
    left: 0;
    position: fixed;
    width: $screen-left-width;
    height: $screen-left-height;

    .close-btn {
      position: absolute;
      right: -20px;
      top: 50%;
      padding: 0;
      height: $screen-btn-with;
      width: $screen-btn-height;
      text-align: center;
    }

    .attach-box {
      position: absolute;
      right: -42px;
      top: 0;
      padding: 0;
      width: 32px;
      text-align: center;
    }
  }

  /** 右侧面板 **/
  .screen-right {
    top: 96px;
    right: 0;
    position: fixed;
    width: $screen-right-width;
    height: $screen-right-height;

    .close-btn {
      position: absolute;
      left: -32px;
      top: 50%;
      padding: 0;
      height: $screen-btn-with;
      width: $screen-btn-height;
      text-align: center;
    }

    .attach-box {
      position: absolute;
      top: 0;
      left: -62px;
      padding: 0;
      width: 32px;
      text-align: center;
    }
  }

  /** 底部工具栏 **/
  .screen-bottom {
    width: $screen-bottom-width;
    left: $screen-bottom-left;
    bottom: 1px;
    position: fixed;

    .close-btn {
      left: 50%;
      top: -20px;
      position: absolute;

      width: $screen-btn-with;
      height: $screen-btn-height;
      transform: translateX(-50%);
    }
  }
}
